import React from 'react';
import { connect } from 'dva/index';
import { Button, Col, Form, Input, InputNumber, Radio, Row, Table, Tabs, Upload, Icon, Modal } from 'antd';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const RadioGroup = Radio.Group;


const DeclareInfoWord = Form.create()(class DeclareInfoWord extends React.Component {
  state = {
    open: false,
    normalDeclareList: [],
    defaultNormalDeclareList: [],
    payDeclareList: [],
    defaultPayDeclareList: [],
  };

  constructor(props: any) {
    super(props);
    this.state = {
      open: false,
      normalDeclareList: [],
      defaultNormalDeclareList: [],
      payDeclareList: [],
      defaultPayDeclareList: [],
    };
  }

  componentWillReceiveProps(nextProps: any) {
  }

  handleReset = () => {
  }

  handleExportDeclarePlan = () => { // 导出报关计划
  }

  cleanItem = () => {}

  handleCollectForm = () => {}

  handleCancel = () => {
    // @ts-ignoretable
    this.props.form.resetFields();
    this.setState({ open: false });
  };

  handleOpen = () => {
    this.setState({ open: true });
  };


  getNormalColumns = (disabled: any) => {
    const normalColumns = [
      {
        title: '经营单位',
        dataIndex: 'company',
        key: 'company',
        width: true ? '50%' : '40%',
        render: (text: any, record: any, index: any) => {
          if (disabled) {
            // eslint-disable-next-line no-unused-expressions
            <span>{record.company}</span>;
          } else {
            // eslint-disable-next-line no-unused-expressions
            <Input maxLength={50} value={record.company} style={{ width: '100%' }}/>;
          }
        },
      },
      {
        title: '重量(KGS)',
        dataIndex: 'weight',
        key: 'weight',
        width: '25%',
        render: (text: any, record: any, index: any) => {
          // eslint-disable-next-line no-unused-expressions
          if (disabled) <span>{record.weight}</span>
          // eslint-disable-next-line no-unused-expressions
          else <InputNumber maxLength={18} value={record.weight} style={{ width: '100%' }}/>
        },
      },
      {
        title: '件数',
        dataIndex: 'count',
        key: 'count',
        width: '25%',
        render: (text: any, record: any, index: any) => {
          // eslint-disable-next-line no-unused-expressions
          if (disabled) <span>{record.count}</span>
          // eslint-disable-next-line no-unused-expressions
          else <InputNumber maxLength={11} style={{ width: '100%' }}/>
        },
      },
    ];


    normalColumns.push({
      dataIndex: 'count',
      title: '件数',
      key: 'delete',
      width: '10%',
      render: (text: any, record: any, index: any) => {
        // eslint-disable-next-line no-unused-expressions
        <Button type="primary" icon="delete" style={{ marginRight: 5 }} size="small"/>
      },
    })

    return normalColumns;
  }

  getPayColumns = (disabled: any) => {
    const payColumns = [
      {
        title: '重量(KGS)',
        dataIndex: 'weight',
        key: 'weight',
        width: '45%',
        render: (text: any, record: any, index: any) => {
          // eslint-disable-next-line no-unused-expressions
          if (true) <span>18</span>;
          // eslint-disable-next-line no-unused-expressions
          else <InputNumber maxLength={18} style={{ width: '96%' }}/>
        },
      },
      {
        title: '件数',
        dataIndex: 'count',
        key: 'count',
        width: '45%',
        render: (text: any, record: any, index: any) => {
          if (true) return <span>{record.count}</span>
          return <InputNumber maxLength={11} style={{ width: '100%' }}/>
        },
      },
    ];

      payColumns.push({
        dataIndex: '',
        title: '',
        key: 'delete',
        width: '10%',
        render: (text: any, record: any, index: any) => <Button type="primary" icon="delete" style={{ marginRight: 5 }} size="small"/>,
      })

    return payColumns;
  }

  checkOrderDeclareInfo = () => {}


    render() {
        // @ts-ignore
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };

        const divWithOutBorderBottom = {
            display: 'flex',
            borderRight: '1px solid #e9e9e9',
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderSpacing: 0,
            lineHeight: 4.2,
            // textAlign: 'left',
        }

        // @ts-ignore
      const table = <Table bordered={false} className="customTableSmall" rowKey="id" columns={this.getNormalColumns(true)}
                           size="small" pagination={false} />;

      // @ts-ignore
      const table2 = <Table bordered={false} className="customTableSmall" rowKey="id" columns={this.getPayColumns(true)}
                            size="small" pagination={false} />


      const footer = [];

      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );

      // @ts-ignore
      const { loading } = this.props;

      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={loading}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="报关工作单"
          visible={this.state.open}
          width={950}
          footer={footer}
          onCancel={this.handleCancel}
        >
            <div>
                <Form>
                    <Tabs tabPosition="top">
                        <TabPane tab="制定报关计划" key="1">
                            <div style={{ width: '88%', marginLeft: 50 }}>
                                <div style={{ textAlign: 'center' }}>
                                    <div><span><b>广州瀚森乐达供应链管理有限公司——报关计划</b></span></div>
                                  {/* eslint-disable-next-line max-len */}
                                    <div style={{ marginTop: 10 }}><span>地址: 广州市海珠区后滘镇后滘西大街139号鲁思湖畔空间创意园B1-207室</span>
                                      {/* eslint-disable-next-line max-len */}
                                        <span style={{ marginLeft: 50 }}>TEL: 020-87512605-813</span>
                                    </div>
                                </div>
                                <div style={{ textAlign: 'left', marginTop: 10, marginBottom: 10 }}>
                                    <div><span>TO: 北斗星物流</span></div>
                                  {/* eslint-disable-next-line max-len */}
                                    <div style={{ marginTop: 10 }}><span>FM: 刘备 / 15532568874</span></div>
                                  {/* eslint-disable-next-line max-len */}
                                    {/* <div style={{ marginTop: 10 }}><span>SO号: {dataSource.soNo}</span></div> */}
                                  {/* eslint-disable-next-line max-len */}
                                    <div style={{ marginTop: 10 }}><span>柜型/柜量: 2*20GP   39KGS &nbsp;&nbsp;&nbsp; 1*40GP   16KGS
                                      &nbsp;&nbsp;&nbsp; 1*40HQ   68KGS</span></div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>SO号 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('soNo', {
                                                    initialValue: '',
                                                })(
                                                    <Input maxLength={300} style={{ width: '90%', marginBottom: 5, marginLeft: 24 }} />,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>柜号 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('cntrNo', {
                                                    initialValue: '',
                                                })(
                                                    <Input maxLength={300} style={{ width: '90%', marginBottom: 5, marginLeft: 24 }} />,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>封条号 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('sealNumber', {
                                                    initialValue: '',
                                                })(
                                                    <Input maxLength={50} style={{ width: '90%', marginBottom: 5, marginLeft: 13 }} />,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>出口码头 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('exportWharf', {
                                                    initialValue: '',
                                                })(
                                                    <Input maxLength={300} style={{ width: '90%', marginBottom: 5 }} />,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>报关要求 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('declareRequire', {
                                                    initialValue: '',
                                                })(
                                                    <Input maxLength={300} style={{ width: '90%', marginBottom: 5 }} />,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '90%', marginLeft: 10 }}>
                                        <div>报关方式 &nbsp;&nbsp;
                                            <span>
                                                {getFieldDecorator('declareType', {
                                                    initialValue: '',
                                                })(
                                                    <RadioGroup style={{ width: '60%' }} >
                                                        <Radio value="1">国际中转</Radio>
                                                        <Radio value="2">内河转关</Radio>
                                                        <Radio value="3">一关通</Radio>
                                                    </RadioGroup>,
                                                    )}
                                            </span>
                                        </div>
                                    </div>
                                    <div style={{ width: '10%', marginLeft: 10 }}>
                                      {/* eslint-disable-next-line react/jsx-no-bind */}
                                        <Button type="primary" icon="delete" size="small" onClick={this.cleanItem.bind(this)}>重置</Button>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '8%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>提单 </div>
                                    <div style={{ width: '46%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>总毛重 &nbsp;&nbsp; <span>
                                            {getFieldDecorator('totalWeight', {
                                                initialValue: '',
                                            })(
                                                <InputNumber maxLength={18} style={{ width: '75%', marginBottom: 5 }} />,
                                                )}KGS
                                        </span>
                                        </div>
                                    </div>
                                    <div style={{ width: '46%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>总件数 &nbsp;&nbsp; <span>
                                            {getFieldDecorator('totalNum', {
                                                initialValue: '',
                                            })(
                                                <InputNumber maxLength={18} style={{ width: '80%', marginBottom: 5 }} />,
                                                )}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '20%', textAlign: 'center', borderRight: '1px solid #e9e9e9' }}>
                                      <span>{`正常单报关(${this.state.normalDeclareList.length})`}</span>
                                      : <Button type="primary" icon="plus" size="small">正常单报关()</Button></div>

                                    <div style={{ width: '100%' }}>
                                      {table}
                                    </div>

                                </div>
                                <div style={divWithOutBorderBottom}>
                                    <div style={{ width: '20%', textAlign: 'center', borderRight: '1px solid #e9e9e9' }}>
                                      <span>{`买单报关(${this.state.payDeclareList.length})`}</span>
                                      : <Button type="primary" icon="plus" size="small">买单报关()</Button></div>
                                    <div style={{ width: '100%' }}>
                                      {table2}
                                    </div>
                                </div>

                                <div style={divWithOutBorderBottom}>
                                    <div style={{ marginLeft: 248 }}>注意: 正常单报关件数+买单报关件数=提单总件数<br />
                                      {/* eslint-disable-next-line max-len */}
                                        <div style={{ marginLeft: 30 }}>正常单报关重量+买单报关重量=提单总毛重</div></div>
                                </div>
                                <div style={Object.assign({}, { borderBottom: '1px solid #e9e9e9', marginBottom: 20 }, divWithOutBorderBottom)}>
                                    <div style={{ width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>正常单报关费 &nbsp; <span>
                                            {getFieldDecorator('normalDeclareFee', {
                                                initialValue: '',
                                            })(
                                                <Input maxLength={11} style={{ width: '76%', marginBottom: 5 }} />,
                                                )}
                                        </span>
                                        </div>
                                    </div>
                                    <div style={{ width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                        <div>买单报关费 &nbsp; <span>
                                            {getFieldDecorator('payBillDeclareFee', {
                                                initialValue: '',
                                            })(
                                                <Input maxLength={11} style={{ width: '78%', marginBottom: 5 }} />,
                                                )}
                                        </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>

                    <Tabs tabPosition="top">
                        <TabPane tab="报关凭证" key="1">
                            <Row>
                              {/* eslint-disable-next-line max-len */}
                                <Col span={4} style={{ marginLeft: 90, marginTop: 10, marginBottom: 10 }}>
                                    <a href="#" onClick={this.handleExportDeclarePlan.bind(this)}>导出报关计划</a>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label={<span className="ant-form-item-required">报关底单</span>} hasFeedback>
                                      <Upload.Dragger>
                                        <p className="ant-upload-drag-icon">
                                          <Icon type="inbox" />
                                        </p>
                                        <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                                      </Upload.Dragger>
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label={<span className="ant-form-item-required">放行通知书</span>} hasFeedback>
                                      <Upload.Dragger>
                                        <p className="ant-upload-drag-icon">
                                          <Icon type="inbox" />
                                        </p>
                                        <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                                      </Upload.Dragger>
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <FormItem {...formItemLayout} label={<span className="ant-form-item-required">其他资料</span>} hasFeedback>
                                      <Upload.Dragger>
                                        <p className="ant-upload-drag-icon">
                                          <Icon type="inbox" />
                                        </p>
                                        <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                                      </Upload.Dragger>
                                    </FormItem>
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </Form>
            </div>
        </Modal>
        )
    }
})

function mapStateToProps(state: any) {
    return {
        loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(DeclareInfoWord);
